<template>
    <div>
        <van-nav-bar
            title = "注册"
            left-text = "返回"
            left-arrow
            @click-left = "goBack"
        />
        <div class="register_panel">
             <van-field
                v-model="username"
                label="用户名"
                icon="clear"
                placeholder="请输入用户名"
                required
                @click-icon="username = ''"
                :error-message = "usernameError"
            />
            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
                :error-message="passwordError"
            />
            <van-field
                v-model="password1"
                type="password"
                label="再次输入密码"
                placeholder="请再次输入密码"
                required
                :error-message="passwordError1"
            />
            <div class="register-button">
                <van-button type="primary" @click="registerAction" size="large" >注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                username : '',
                password : '',
                password1 : '',
                usernameError : '',
                passwordError : '',
                passwordError1 : '',
                openLoad : false  //是否开启用户的Loading状态
            }
        },
        methods:{
            goBack(){
                this.$router.go(-1)
            },
            registerAction(){
                this.checkRegist() && this.axiosRegisterUser()
            },
            //axios注册用户方法
            axiosRegisterUser(){
                    // this.openLoad = true;
                    axios({
                    url: 'http://localhost:3000/user/register',
                    method: 'post',
                    data:{
                        userName:this.username,
                        password:this.password1 
                    }
                    }).then(response => {
                        // console.log("-----------",response);
                        const {data,status} = response
                        if(status === 200){
                            if(data.msg === "账号已存在"){
                                Toast.fail('账号已存在')
                            }
                            if(data.msg === "注册成功"){
                                Toast.success('注册成功')
                                this.$router.push('/login')
                            }
                        }

                    })
                                   
            },
            checkRegist(){
                this.username = this.username.replace(/\s+/g,"")
                if(this.username.length<3||this.username.length>15){
                    this.usernameError = "用户名必须在3到15位之间"
                    this.username = null
                    return false
                }else{
                    this.usernameError = ""
                    // if(this.password.replace(/\s+/g,"") === ''){
                    //     this.passwordError = "密码为不能输入空格"
                    //     this.password = ''
                    // }else{
                    this.password = this.password.replace(/\s+/g,"")
                    console.log("password--------",this.password);
                    if(this.password&&this.password.length>5){
                        this.passwordError = ""
                        if(this.password1&&this.password1 === this.password){
                            this.passwordError1 = ""
                            return true
                        }else{
                            this.passwordError1 = "两次输入密码必须相同"
                            this.password1 = null
                            return false
                        }                   
                    }else{
                        if(!this.password){
                            this.passwordError = "密码为必填项"
                        }else{
                            if(this.password.length<6){
                                this.passwordError = "密码必须为大于或等于6位的非空字符"
                                this.password = null
                            }
                        }                  
                        return false
                    }
                    // }
                    
                }
            }
        },
        mounted:function(){
            this.$store.dispatch('HIDENAV')
            // console.log("1111111111");
        },
        destroyed:function(){
            this.$store.dispatch('SHOWNAV')
        }
    }
</script>

<style >
    .register-panel{
        width:96%;
        border-radius: 5px;
        margin:20px auto;
        padding-bottom:50px;
    }
    .register-button{
        padding-top:15px;
    }
</style>